{% extends 'base.html' %}
{% block title %}报告编辑{% endblock %}
{% block head %}
    <link  type="text/css"  rel="stylesheet" href="{{ url_for('static',filename='main/main.css') }}"/>

    <link type="text/css" rel="stylesheet" href="{{ url_for('static',filename='main/Report.css') }}"/>
{% endblock %}


{#自定义导航菜单#}
{% block navmenu %}

<li><a onclick="saveReport();" id="save" class="btn">保存</a></li>
<li><a onclick="exportReport();" id="export" class="btn">导出</a></li>
{#    添加元素#}
<li><a class="dropdown-trigger" href="#!" data-target="add_menu" id='add_element_trigger' > 添加图表 </a></li>
{% endblock %}

{% block navtitle %}{{ report.title }}{% endblock %}



{% block body  %}


<div class="row">

<div class="col s3">
    {# 第一个侧滑  素材栏 #}
<div class="sidenav row" id="slide-raw">
{#        数据源选择框 #}

{#    创建元素下拉框   #}
    <ul id="add_menu" class="dropdown-content">
        <li><a href="#!" onclick="addElement('chart')">图表</a></li>
        <li><a href="#!" onclick="addElement('text')">文字</a></li>

    </ul>
<h4>可选元素 <a class="btn dropdown-trigger"  id='add_menu_trigger' data-target="add_menu"  >+</a></h4>


<div id="chartlist">
{#    解决vue和jinja2模板冲突#}
    {% raw %}
{# 图表列表 #}
    <template  v-for="option in options">
<div class="charts s12 col">

    <div class="card s12 col"><div class="card-image" >
     <div  v-bind:id="option.id" style="width: 200px;height: 200px;"></div>
     <span class="card-title">{{ option.id }}</span>

    </div>
    <div class="card-content"><p>{{ option.id }}</p></div>
        <div  class="card-action"><a href="#!" v-bind:onclick="'addChart(\''+ option.id +'\')'">添加到列表</a></div>
    </div>

</div>
</template>
    {% endraw %}
</div>




</div>
</div>

{#前面准备用于固定显示左边侧滑，将界面分成3:9的比例用#}
<div class="col s9">
{# 右边的配置界面 #}
{#    #}


{#    应用修改按钮#}
    <a href="#!"  id='apply' class="btn waves-block hide" style="z-index: 99999;position:fixed;top:0;right: 0;" >应用</a>


    <div class="sidenav" id="slide-config" style="width: 700px;padding-left: 30px;">




    {#        图表配置 ，分为常规和高级 选项 #}
        <ul class="tabs" id="tabs_chartedit">
            <li class="tab col s6"><a href="#normal">简单</a></li>
            <li class="tab col s6"><a href="#advance">Option</a></li>
        </ul>



        <div id="normal">简易修改
    <div class="row ">
{#        显示创建爱图表时的界面 #}
        <a href="#!" class="btn-flat col s6" id="dataEdit">数据设置</a>
        <a href="#!" class="btn-flat col s6" id="refresh">刷新图表</a>
    </div>

         {% raw %}
    <div id="chartEdit" >
        图表高度: {{ chart.width }}px <input   v-on:input="changeSize('width')" v-model="chart.height" id="chart_height" type="range" min="300" max="1000" name="test"/>
       <!-- 暂时只修改高度，框高都变 图表宽度: {{ chart.width }}px <input  v-model="chart.width" v-on:change="changeSize('width')" id="chart_width" type="range" min="300" max="1000" name="test"/> -->

        <div class="divider"></div>
        <div class="section">
            <h5>标题设置</h5>
            <!--循环生成标题修改-->
            <div class="row" v-for="(title,index) in option.title">
            <div class="col s6">
                <label><input type="checkbox"  v-on:change="changeOption()"  v-model="title.show"/><span>标题 {{ index }}</span></label>
                <input  id="chart_title"  v-on:change="changeOption()" v-model="title.text"/>
            </div>
            <div class="col s6">副标题{{ index }}:<input  v-on:change="changeOption()" v-model="title.subtext"/></div>
            </div>

        </div>

        <div class="divider"></div>
        <div class="section">
            <h5>格子(Grid)设置</h5>

            <div class="row" v-for="(grid,index) in option.grid">
                <h6>Grid {{ index }}</h6>
                <div  class="col s6" is="percent-range" v-on:change="changeOption" value="grid.width" v-model="grid.width" title="宽度"></div>
                <div  class="col s6" is="percent-range" v-on:change="changeOption" value="grid.width" v-model="grid.height" title="高度"></div>
                <div  class="col s6" is="percent-range" v-on:change="changeOption" value="grid.top" v-model="grid.top" title="距离顶部"></div>
                <div  class="col s6" is="percent-range" v-on:change="changeOption" value="grid.bottom" v-model="grid.bottom" title="距离底部"></div>
                <div  class="col s6" is="percent-range" v-on:change="changeOption" value="grid.left" v-model="grid.left" title="距离左边"></div>
                <div  class="col s6" is="percent-range" v-on:change="changeOption" value="grid.left" v-model="grid.right" title="距离右边"></div>
            </div>
        </div>

    <div class="divider"></div>
        <div class="section">
            <h5>图例</h5>

            <div class="row" v-for="(legend,index) in option.legend">
                <!--<h6>Legend {{ index }}</h6>-->
               <label><input type="checkbox" v-on:change="changeOption" v-model="legend.show"/><span>显示</span></label>
            </div>
        </div>


    </div>

{% endraw %}

        </div>


    {#    高级编辑Option编辑#}
        <div id="advance">
        {% raw %}
    <div id="option">

        <nav class="teal nav-wrapper">
            <div class="col s12">
                <a href="#!" class="breadcrumb"  v-on:click="enterObjectByOffset(index)" v-for="(name,index) in path">{{ name }}</a>
            </div>
        </nav>

        <!-- select数组选择  -->

        <!-- 键值对界面 -->
        <ul class="collection">
            <li  class="collection-item" v-for="(value,key) in getObjects"><a href="#!" v-on:click="enterObject(value)">{{ value }}</a></li>
        </ul>

        <div class="divider"></div>
        <!-- 输入界面 -->

        <div class="row" v-for="edit in getEditors">

            <div class="col s12" v-if="edit.input_type==='checkbox'">
            <label>
                <input v-on:change="changeOption()" v-model="edit.object[edit.key]" type="checkbox" class="filled-in"/>
                <span>{{ edit.key }}</span>
            </label>
            </div>
            <div class="input-field col s12" v-else>
                <input  type="text"  v-on:change="changeOption()" v-model="edit.object[edit.key]" class="validate" v-bind:id="'edit-'+edit.key" />
                <label :for="'edit-'+edit.key" class="active">{{ edit.key }}</label>
            </div>
        </div>

    </div>
        {% endraw %}</div>

    </div>









{#进度条 ,保存等用，悬浮居中 #}
    <div class="progress" id="saveprogress" style="display: none;position: fixed;left: 0;right: 0;margin: 0 auto;top: 50%;"> <div class="indeterminate"></div></div>
<a href="#!" class="sidenav-trigger" data-target="slide-raw"> <i>Trigger</i> </a>





{#  主显示区域  #}

{#报告区域#}
<div id="report">





</div>







{#添加图表模态框#}

    <div id="createchart-modal" class="modal modal-fixed-footer">

        <div class="modal-content">

        <div class="row">
{#        <a class="dropdown-trigger btn col s6 " id="datasource-trigger" href="#" data-target="datasource">选择数据源</a>#}

        <select id="recordid" >
        </select>
        </div>

{#        tabs#}
        <ul class="tabs" id="createchart_tabs">
            <li class="tab col s3"><a href="#base">基本</a></li>
            <li class="tab col s3"><a href="#sort">排序</a></li>
            <li class="tab col s3 disabled"><a href="#filter">过滤</a></li>
        </ul>




            <div class="row" id="base">
                {#   分组 字段选择               #}
                <div class="col s3 input-field">
                    <select id="groupfield" multiple>
                    {% for name,field in columns.items() %}
                    <option value="{{ field }}">{{ name }}</option>
                    {% endfor %}
                    </select>
                <label>按字段分组</label>
                </div>

{#            聚合字段选择 ,这里将全部字段显示出来#}
                <div class="col s3 input-field">
                    <select id="aggfield" multiple>
                    {% for name,field in columns.items() %}

                     <optgroup label="{{ name }}">
                    <option value="count-{{ field }}">{{ name }} 计数</option>
                    <option value="sum-{{ field }}">{{ name }} 总和</option>
                    <option value="avg-{{ field }}">{{ name }} 平均值</option>
                     </optgroup>
                    {% endfor %}
                    </select>
                <label>统计</label>
                </div>

{#            数据类型#}
{#                <div class="col s3">#}
{##}
{#                {% raw %}#}
{#                <select id="dataType">#}
{#                    <template v-for="item in dataTypeFields">#}
{#                    <option v-bind:value="item.field">{{ item.name }}</option>#}
{#                        </template>#}
{#                </select>#}
{#                {% endraw %}#}
{#                <label>数据类型</label>#}
{##}
{#                </div>#}
{#                图表类型 #}
                <div class="col s3 input-field">
                <select id="chartType">
                    {% for key,name in chartTypes.items() %}  <option value="{{ key }}">{{ name }}</option>  {% endfor %}
                </select>
                <label>图表类型</label>
                </div>


            </div>

{#        第二行选择#}
        <div class="row" id="sort">
{#            限制多少条 #}
                  <div class="col s3">

                    {% raw %}
                    <select id="orderBy">
                    <template v-for="item in orderByFields">

                    <option v-bind:value="item.field">{{ item.name }}</option>
                     </template>
                    </select>
                    {% endraw %}
                <label>排序</label>
                </div>

            <div class="col s3"><select id="order"><option value="desc">高到低</option><option value="asc">低到高</option></select></div>
            <div class="col s3"><label for="limit">Top选项</label><input value="-1" id="limit"/></div>

        </div>









{#        图表预览#}
        <div class="row">
            <div id="preview_chart" ></div>
        </div>

        </div>
        <div class="modal-footer">
            <a class="btn-flat waves-effect" id="preview" onclick="previewChart();">预览</a>
            <a href="#!" class="btn-flat modal-close waves-effect" onclick="createChartOrTable();" id="createChart">创建</a>
            <a href="#!" class="btn-flat modal-close">关闭</a>
        </div>
    </div>






{#    添加文字对话框 #}
    <div class="modal modal-fixed-footer" id="createtext-modal">

        <div class="modal-content">
{#            指定创建id , 新建时为空#}
            <p id="createtext_id"></p>
            <div class="row">
                <div class="col s4 input-field"><select id="paragraph"><option value="p">段落</option>
                <option value="h1">标题一</option>
                <option value="h2">标题二</option>
                <option value="h3">标题三</option>
                <option value="h4">标题四</option>
                </select><label for="textStyle">文字格式</label></div>
            </div>

            <div class="input-field col s12">
                <input id="text" type="text"/>
                <label class="active"  for="text">插入文本内容</label>
            </div>


        </div>
        <div class="modal-footer">
            <a href="#!" class="btn-flat modal-close waves-effect" onclick="createText();" id="createText">创建</a>
            <a href="#!" class="btn-flat modal-close">关闭</a>
        </div>

    </div>

</div>







</div>


{% endblock %}

{% block script %}



    <script type="text/javascript" src="{{ url_for('static',filename='js/echarts.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='js/china.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='js/Sortable.min.js') }}"></script>

    <script src="{{ url_for('static',filename='js/vintage.js') }}"></script>

    {#  通用工具类  #}
    <script type="text/javascript"  src="{{ url_for('static',filename='js/zs.js') }}"></script>

    <script type="text/javascript"  src="{{ url_for('static',filename='main/Report.js') }}"></script>

    <script type="text/javascript"  src="{{ url_for('static',filename='chart/chartEditor.js') }}"></script>
    <script type="text/javascript"  src="{{ url_for('static',filename='main/main.js') }}"></script>

    {#    下面Echart编辑需要的组件#}
    <script type="text/javascript" src="{{ url_for('static',filename='components.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='chart/EChartEditor.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='chart/OptionEditor.js') }}"></script>





    <script type="text/javascript">

{#    侧滑对象#}
     var slide_config;
     var slide_raw;
     var createchart_modal,createtext_modal;

     //各个select
     var select_fields;
     var select_dataType;
     var select_chartType;
     var select_orderBy;

     //当前的记录id
     //var recordid;改为select标签，获取参数时直接获取
        //当前编辑的图表id
    var chartid=0;
    //当前report的id
    var reportid={{ report.id }};

    //图表简易修改
    var echartEdit = new EChartEditor();
    //图表高级修改
    var optionEdit = new OptionEditor();

{#    初始化侧滑 #}
    document.addEventListener('DOMContentLoaded',function (evt) {

        {#初始化select #}


        slide_raw = M.Sidenav.init(document.getElementById('slide-raw'),{
            onOpenStart:function () {
                console.log("打开...");
            }
        });

        slide_config = M.Sidenav.init(document.getElementById('slide-config'),{
            edge:'right',
            onOpenStart:function () {
                  $('#apply').removeClass('hide');
            },
            {#关闭完成 时#}
            onCloseEnd:function () {
                //更新图表
                //chartEditor.updateChart();
                $("#apply").addClass('hide');
            }
        });

        console.log(slide_raw);
       // slide_raw.open();
        console.log("页面加载完成,侧滑:");
        slide_config.open();

        //初始化其他
        createchart_modal =  M.Modal.init(document.getElementById('createchart-modal'));
        createtext_modal = M.Modal.init(document.getElementById('createtext-modal'));

        //创建图表tab
        M.Tabs.init(document.getElementById('createchart_tabs'));
        //图表编辑模式tab
        M.Tabs.init(document.getElementById('tabs_chartedit'));

        //下拉框
        M.Dropdown.init(document.getElementById('add_menu_trigger'));
        M.Dropdown.init(document.getElementById('add_element_trigger'));




    });


    //应用点击事件
    $('#apply').click(function () {
        console.log(JSON.stringify( optionEdit.chart.getOption()));

    });

    //当前图表的id
    $('#dataEdit').click(function(){
        console.log('编辑图表数据:');
        {#先关闭侧滑，不然侧滑关闭时会自动更新option,修改数据后的option会没有用#}
        slide_config.close();
        //编辑图表而不是option
        editChart(chartid);


    });
    //可以排序的字段，根据,选择的字段和数据类型推断,vue绑定  , 更新，图表类型，可选
    var orderByFields=[{field:'null',name:'无'}];
    //聚合数据类型的 ， 会随着字段的选择而动态变化,用与vue
    var allDataType=['计数','平均值','总和'];
    var dataTypeFields=[{field:'null',name:'无'}];


    //选择字段才会更新dataType
    function updateDataType()
    {
        dataTypeFields.splice(1,dataTypeFields.length-1);
        var options = $('#field option:selected');
          //更新聚合函数数据 ,只需要选择的最后一个字段就行,至少选择了一个元素
         if(options.length>0)
         {
             //获取最后一个字段的值
             var name = $(options[options.length-1]).text();
             var field = $(options[options.length-1]).val();
             console.log('最后一个:'+name+' value:'+field);

             dataTypeFields.push({name:'计数',field:'count_'+field});
             dataTypeFields.push({name: name+ ' 平均值',field:'avg_'+field});
             dataTypeFields.push({name: name+ ' 总和',field:'sum_'+field});
         }
         //监听vue渲染完元素后更新select
        v_dataType.$nextTick(function () {
        console.log("数据类型渲染完成..重新加载");
        M.FormSelect.init(document.getElementById('dataType'));

    });
         //监听数据类型，改变，每次更新dataType后重新设置事件
        $('#dataType').change(function () {
        console.log('数据类型框改变..更新排序');
        updateOrderBy();

    });

    }
    //选择dataType才会更新orderBy
    function updateOrderBy()
     {
     //var select_fields = M.FormSelect.init(document.getElementById('field'));
     //var select_dataType = M.FormSelect.init(document.getElementById('dataType'));
     var  select_chartType = M.FormSelect.init(document.getElementById('chartType'));
     var  select_order = M.FormSelect.init(document.getElementById('order'));

        // var fields = select_fields.getSelectedValues();

    var chartType = select_chartType.getSelectedValues()[0];
    var order = select_order.getSelectedValues()[0];


    //获取所有选择的,因为要获取text，不能使用getSelectedValues();,分组和聚合里面选择了的才能排序
    var groupFields = $('#groupfield option:selected');
    var aggFields = $('#aggfield option:selected');
    //先清空,除了第一个的
    orderByFields.splice(1,orderByFields.length-1);
         
    groupFields.each(function (index,element) {
        console.log('遍历分组字段:'+element);
             orderByFields.push(
                {
                    field:$(element).val()+'+'+order,
                    name:$(element).text()
                }
            );
    });


   aggFields.each(function (index,element) {
        console.log('遍历聚合函数:'+element);
             orderByFields.push(
                {
                    field:$(element).val()+'+'+order,
                    name:$(element).text()
                }
            );
    });
    //渲染完成，初始化select
    orderBy.$nextTick(function () {
        console.log("排序渲染完成..");
        M.FormSelect.init(document.getElementById('orderBy'));
    });






    }


    {# 更新提示 ,如 根据xx分组，统计xxx的平均值，结果以xx排序,结果以xx展示 #}
    function updateTip()
    {


    }

    //监听select的变化，更新排序字段，排序字段只能是选择的那几个？？

    //分组字段是有顺序的,字段改变
    $('#groupfield').change(function () {
        console.log('-------------------字段选择改变-------------,更新数据类型');
        //选择完后更新顺序
            var select_fields = M.FormSelect.init(document.getElementById('groupfield'));
            //将选择的移动到上面,选择出所有select的
            var options_select = $('#groupfield option:selected');
            var options_unselect = $('#groupfield option:not(:selected)').eq(0);
            console.log('已经选择的和没选择的 :');
            //查找到现在在第一的option
            console.log(options_select);
            console.log(options_unselect);

            //移动到第一个没有选择的前面
            options_select.each(function (index,ele) {
                console.log("移动:");
                console.log(ele);
                console.log(options_unselect);
                $(options_unselect).before(ele);
            });
             M.FormSelect.init(document.getElementById('groupfield'));

             //updateDataType();
        //分组字段改变后更新排序的字段
            updateOrderBy();
    });

    $('#aggfield').change(function () {
        updateOrderBy();

    });
    //排序改变
    $('#order').change(function () {
        updateOrderBy();

    });


    {#$('#createchart-modal select').change(function () {#}
    {#    console.log("select框改变..");#}
    {#    //this是当前这个改变的select#}
    {#    console.log(this);#}
    {#    var id = $(this).attr('id');#}
    {#    if(id==='dataType')#}
    {#    {#}
    {#        console.log("数据类型改变");#}
    {#        updateOrderBy();}#}
    {#    //字段选择后，选择的移动到前面#}
    {#    else if(id==='field')#}
    {#    {#}
    {#        //更新dataType#}
    {#        updateDataType();#}
    {##}
    {#    }#}
    {##}

    var orderBy=new Vue({
        el:'#orderBy',
        data:{
            orderByFields:orderByFields
        }
    });

    var v_dataType = new Vue({
        el:'#dataType',
        data:{
            dataTypeFields:dataTypeFields
        }
    });
    //预览图表
    {#var preview_chart = echarts.init(document.getElementById('preview_chart'));#}
    {#    var testOptions = {#}
    {#    title:{#}
    {#        text:"测试图表"#}
    {#    },#}
    {#    series:{#}
    {#        type:'pie',#}
    {#        data:[#}
    {#            {name:"Android",value:40},#}
    {#            {name:"Linux",value:30},#}
    {#            {name:"Windows",value:3}#}
    {#        ]#}
    {#    }#}

    {#preview_chart.setOption(testOptions);#}
    </script>
{#  <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>#}
{#        <script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/china.js"></script>#}

{% endblock %}
